<script setup lang="ts">
import { computed } from 'vue'
import { useWatermarkStore } from '../../store/useWatermarkStore'
import { ProcessStatus } from '../../types'
import { formatFileSize } from '../../utils'
import ResultViewer from './ResultViewer.vue'

const store = useWatermarkStore()

// 按处理状态分组的文件
const groupedFiles = computed(() => {
  const pending = store.files.filter(file => file.status === ProcessStatus.IDLE || file.status === ProcessStatus.UPLOADING)
  const processing = store.files.filter(file => file.status === ProcessStatus.PROCESSING)
  const completed = store.files.filter(file => file.status === ProcessStatus.SUCCESS)
  const failed = store.files.filter(file => file.status === ProcessStatus.ERROR)
  
  return { pending, processing, completed, failed }
})

// 处理文件
const processFile = (fileName: string) => {
  store.processFile(fileName)
}

// 移除文件
const removeFile = (fileName: string) => {
  store.removeFile(fileName)
}

// 查看处理结果
const viewResult = (fileName: string) => {
  const file = store.files.find(file => file.name === fileName)
  if (file) {
    store.setCurrentFile(file)
  }
}
</script>

<template>
  <div class="file-list">
    <!-- 待处理文件 -->
    <div v-if="groupedFiles.pending.length > 0" class="file-group">
      <h3 class="text-lg font-medium mb-2">待处理</h3>
      <el-card v-for="file in groupedFiles.pending" :key="file.name" class="file-card">
        <div class="file-info">
          <div class="file-preview">
            <img v-if="file.type.startsWith('image/')" :src="file.url" alt="预览" />
            <div v-else class="video-placeholder">
              <el-icon><video-camera /></el-icon>
            </div>
          </div>
          <div class="file-details">
            <h4 class="file-name">{{ file.name }}</h4>
            <p class="file-meta">{{ formatFileSize(file.size) }}</p>
            <el-progress 
              v-if="file.status === ProcessStatus.UPLOADING" 
              :percentage="file.progress || 0"
              :format="(p) => `上传中 ${p}%`"
            />
          </div>
        </div>
        <div class="file-actions">
          <el-button 
            type="primary" 
            size="small" 
            :disabled="file.status === ProcessStatus.UPLOADING"
            @click="processFile(file.name)"
          >
            处理
          </el-button>
          <el-button 
            type="danger" 
            size="small" 
            plain
            :disabled="file.status === ProcessStatus.UPLOADING"
            @click="removeFile(file.name)"
          >
            移除
          </el-button>
        </div>
      </el-card>
    </div>
    
    <!-- 处理中文件 -->
    <div v-if="groupedFiles.processing.length > 0" class="file-group">
      <h3 class="text-lg font-medium mb-2">处理中</h3>
      <el-card v-for="file in groupedFiles.processing" :key="file.name" class="file-card">
        <div class="file-info">
          <div class="file-preview">
            <img v-if="file.type.startsWith('image/')" :src="file.url" alt="预览" />
            <div v-else class="video-placeholder">
              <el-icon><video-camera /></el-icon>
            </div>
          </div>
          <div class="file-details">
            <h4 class="file-name">{{ file.name }}</h4>
            <p class="file-meta">{{ formatFileSize(file.size) }}</p>
            <el-progress :percentage="file.progress || 0" :format="(p) => `处理中 ${p}%`" />
          </div>
        </div>
      </el-card>
    </div>
    
    <!-- 处理完成文件 -->
    <div v-if="groupedFiles.completed.length > 0" class="file-group">
      <h3 class="text-lg font-medium mb-2">处理完成</h3>
      <el-card v-for="file in groupedFiles.completed" :key="file.name" class="file-card">
        <div class="file-info">
          <div class="file-preview">
            <img v-if="file.type.startsWith('image/')" :src="file.resultUrl" alt="结果" />
            <div v-else class="video-placeholder">
              <el-icon><video-camera /></el-icon>
            </div>
          </div>
          <div class="file-details">
            <h4 class="file-name">{{ file.name }}</h4>
            <p class="file-meta">{{ formatFileSize(file.size) }} · 处理完成</p>
          </div>
        </div>
        <div class="file-actions">
          <el-button type="primary" size="small" @click="viewResult(file.name)">
            查看结果
          </el-button>
          <el-button type="danger" size="small" plain @click="removeFile(file.name)">
            移除
          </el-button>
        </div>
      </el-card>
    </div>
    
    <!-- 处理失败文件 -->
    <div v-if="groupedFiles.failed.length > 0" class="file-group">
      <h3 class="text-lg font-medium mb-2">处理失败</h3>
      <el-card v-for="file in groupedFiles.failed" :key="file.name" class="file-card">
        <div class="file-info">
          <div class="file-preview">
            <img v-if="file.type.startsWith('image/')" :src="file.url" alt="预览" />
            <div v-else class="video-placeholder">
              <el-icon><video-camera /></el-icon>
            </div>
          </div>
          <div class="file-details">
            <h4 class="file-name">{{ file.name }}</h4>
            <p class="file-meta">{{ formatFileSize(file.size) }}</p>
            <p class="text-red-500">{{ file.error || '处理失败' }}</p>
          </div>
        </div>
        <div class="file-actions">
          <el-button type="primary" size="small" @click="processFile(file.name)">
            重试
          </el-button>
          <el-button type="danger" size="small" plain @click="removeFile(file.name)">
            移除
          </el-button>
        </div>
      </el-card>
    </div>
    
    <!-- 结果查看器 -->
    <ResultViewer v-if="store.currentFile" />
  </div>
</template>

<style scoped>
.file-list {
  margin-bottom: 2rem;
}

.file-group {
  margin-bottom: 1.5rem;
}

.file-card {
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
}

.file-info {
  display: flex;
  align-items: center;
}

.file-preview {
  width: 80px;
  height: 60px;
  margin-right: 1rem;
  overflow: hidden;
  border-radius: 4px;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.file-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #e4e7ed;
  color: #909399;
  font-size: 1.8rem;
}

.file-details {
  flex-grow: 1;
}

.file-name {
  font-weight: 500;
  margin-bottom: 0.25rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  color: #909399;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.file-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1rem;
  gap: 0.5rem;
}
</style> 